<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏网站后台管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }

        h1 {
            text-align: center;
            margin-top: 20px;
            color: #333;
        }

       .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        form {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        input[type="text"],
        textarea,
        select {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        input[type="file"] {
            margin-bottom: 10px;
        }

        input[type="date"] {
            padding: 8px;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        /* 编辑器控制按钮样式 */
       .editor-controls {
            display: flex;
            gap: 5px;
            margin-bottom: 10px;
        }

       .editor-controls button {
            padding: 5px 10px;
            background-color: #e0e0e0;
            border: none;
            cursor: pointer;
        }

        /* 插入内容的输入框样式 */
       .input-fields {
            display: none;
            margin-top: 10px;
        }

       .input-fields.active {
            display: block;
        }
    </style>
</head>

<body>
    <h1>游戏网站后台管理</h1>

    <div class="container">
        <!-- 游戏管理 -->
        <h2>游戏管理</h2>
        <form method="post" action="process_backend.php" enctype="multipart/form-data">
            <label for="gameTitle">游戏标题：</label><br>
            <input type="text" name="gameTitle"><br>
            <label for="gameDescription">游戏描述：</label><br>
            <textarea name="gameDescription"></textarea><br>
            <label for="gameImageUpload">游戏图片上传：</label><br>
            <input type="file" name="gameImageUpload"><br>
            <label for="gameReleaseDate">游戏发布日期：</label><br>
            <input type="date" name="gameReleaseDate"><br>
            <input type="submit" value="保存游戏信息">
        </form>

        <!-- 公告管理 -->
        <h2>公告管理</h2>
        <div class="editor-controls">
            <button onclick="toggleInputFields('image')">插入图片</button>
            <button onclick="toggleInputFields('link')">插入链接</button>
            <button onclick="toggleInputFields('video')">插入视频</button>
            <button onclick="boldText()">加粗</button>
            <button onclick="changeFontSize()">修改字体大小</button>
        </div>
        <form method="post" action="process_backend.php">
            <label for="announcement">公告内容：</label><br>
            <textarea id="announcementEditor" name="announcement"></textarea><br>
            <div class="input-fields" id="imageFields">
                <label>选择插入图片方式：</label><br>
                <input type="radio" name="imageSource" value="online" onclick="showOnlineInput()">网上链接<br>
                <input type="radio" name="imageSource" value="local" onclick="showLocalInput()">本地上传<br>
                <div id="onlineImageInput" style="display:none;">
                    <label for="imageUrl">图片 URL：</label><br>
                    <input type="text" id="imageUrl"><br>
                    <button onclick="addImageFromOnline()">确定</button>
                </div>
                <div id="localImageInput" style="display:none;">
                    <label for="localImageUpload">选择本地图片：</label><br>
                    <input type="file" id="localImageUpload"><br>
                    <button onclick="addImageFromLocal()">确定</button>
                </div>
            </div>
            <div class="input-fields" id="linkFields">
                <label for="linkUrl">链接 URL：</label><br>
                <input type="text" id="linkUrl"><br>
                <label for="linkText">链接显示文本：</label><br>
                <input type="text" id="linkText"><br>
                <button onclick="addLink()">确定</button>
            </div>
            <div class="input-fields" id="videoFields">
                <label>选择插入视频方式：</label><br>
                <input type="radio" name="videoSource" value="online" onclick="showOnlineVideoInput()">网上链接<br>
                <input type="radio" name="videoSource" value="local" onclick="showLocalVideoInput()">本地上传<br>
                <div id="onlineVideoInput" style="display:none;">
                    <label for="videoUrl">视频 URL：</label><br>
                    <input type="text" id="videoUrl"><br>
                    <button onclick="addVideoFromOnline()">确定</button>
                </div>
                <div id="localVideoInput" style="display:none;">
                    <label for="localVideoUpload">选择本地视频：</label><br>
                    <input type="file" id="localVideoUpload"><br>
                    <button onclick="addVideoFromLocal()">确定</button>
                </div>
            </div>
            <input type="submit" value="发布公告">
        </form>
    </div>

    <script>
        function toggleInputFields(type) {
            const fields = document.querySelectorAll('.input-fields');
            fields.forEach(field => field.classList.remove('active'));
            document.getElementById(`${type}Fields`).classList.add('active');
        }

        function showOnlineInput() {
            document.getElementById('onlineImageInput').style.display = 'block';
            document.getElementById('localImageInput').style.display = 'none';
        }

        function showLocalInput() {
            document.getElementById('onlineImageInput').style.display = 'none';
            document.getElementById('localImageInput').style.display = 'block';
        }

        function addImageFromOnline() {
            const url = document.getElementById('imageUrl').value;
            if (url) {
                const editor = document.getElementById('announcementEditor');
                const currentValue = editor.value;
                editor.value = currentValue + `[图片：${url}]`;
            }
        }

        function addImageFromLocal() {
            const fileInput = document.getElementById('localImageUpload');
            if (fileInput.files.length > 0) {
                // 这里假设可以通过某种方式将本地图片上传到服务器并获取其 URL
                const editor = document.getElementById('announcementEditor');
                const currentValue = editor.value;
                editor.value = currentValue + '[图片：待上传本地图片的路径]';
            }
        }

        function showOnlineVideoInput() {
            document.getElementById('onlineVideoInput').style.display = 'block';
            document.getElementById('localVideoInput').style.display = 'none';
        }

        function showLocalVideoInput() {
            document.getElementById('onlineVideoInput').style.display = 'none';
            document.getElementById('localVideoInput').style.display = 'block';
        }

        function addVideoFromOnline() {
            const url = document.getElementById('videoUrl').value;
            if (url) {
                const editor = document.getElementById('announcementEditor');
                const currentValue = editor.value;
                editor.value = currentValue + `[视频：${url}]`;
            }
        }

        function addVideoFromLocal() {
            const fileInput = document.getElementById('localVideoUpload');
            if (fileInput.files.length > 0) {
                // 这里假设可以通过某种方式将本地视频上传到服务器并获取其 URL
                const editor = document.getElementById('announcementEditor');
                const currentValue = editor.value;
                editor.value = currentValue + '[视频：待上传本地视频的路径]';
            }
        }

        function addLink() {
            const link = document.getElementById('linkUrl').value;
            const text = document.getElementById('linkText').value;
            if (link && text) {
                const editor = document.getElementById('announcementEditor');
                const currentValue = editor.value;
                editor.value = currentValue + `[链接：${text}(${link})]`;
            }
        }

        function boldText() {
            const editor = document.getElementById('announcementEditor');
            const selectedText = window.getSelection().toString();
            if (selectedText) {
                editor.value = editor.value.replace(selectedText, `**${selectedText}**`);
            }
        }

        function changeFontSize() {
            const size = prompt('请输入字体大小（例如：16px）：');
            if (size) {
                const editor = document.getElementById('announcementEditor');
                const selectedText = window.getSelection().toString();
                if (selectedText) {
                    editor.value = editor.value.replace(selectedText, `<span style="font-size:${size}">${selectedText}</span>`);
                }
            }
        }
    </script>
</body>

</html>